<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4 flex items-center">
            <div>
                <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
            </div>
                
            <div class="flex items-center justify-between ml-4">
                <span class="mr-4 block">分类：</span>
                <!-- <el-input class="mr-4 input" v-model="listQuery.reward_type" placeholder="请输入礼物名称"></el-input> -->
                <el-select v-model="listQuery.reward_type" value-key="" placeholder="请选择" clearable filterable class="mr-4">
                    <el-option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div>
        </section>
  
        <el-table :data="tableList" align="center" border class="mt-4" stripe>
            <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
            <el-table-column label="分类" prop="reward_type">
                <template slot-scope="{row}">
                    {{ row.reward_type === 'gift' ? '礼物' : '装扮' }}
                </template>
            </el-table-column>
            <el-table-column label="礼物ID/装扮ID" prop="reward_id" />
            <el-table-column label="名称" prop="title" />
            <el-table-column label="礼物价格" prop="price"/>
            <el-table-column label="礼物图片" prop="icon">
                <template slot-scope="scoped">
                    <el-image v-if="scoped.row.icon" :src="scoped.row.icon" fit="fill" class="imageStyle" :lazy="true"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="合成列表排序" prop="sort"/>
            <el-table-column label="合成数量" prop="total"/>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
  
        <cus-pagination
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="initData"
        />
  
        <!-- 添加 -->
        <el-dialog
            :close-on-click-modal="false"
            :visible="dialogVisible"
            lock-scroll
            title="添加礼物"
            width="30%"
            @close="closeAddDialog"
        >
            <el-form :model="form" ref="form" :rules="rules" label-width="120px" :inline="false" size="normal">
                <el-form-item label="分类">
                    <el-select v-model="form.reward_type" placeholder="请选择" clearable filterable @change="handleChange1">
                        <el-option v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="礼物分类" v-if="form.reward_type === 'gift'">
                    <el-select v-model="form.compound_type" placeholder="请选择" clearable filterable @change="handleChange2">
                    <el-option v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                    </el-select>
                </el-form-item>



                <!-- 分类是装扮 -->
                <el-form-item v-if="form.reward_type === 'product'" label="装扮ID" prop="reward_id">
                    <el-input v-model="form.reward_id" placeholder="请输入装扮ID"></el-input>
                </el-form-item>
                <el-form-item v-if="form.reward_type === 'product'" label="装扮天数" prop="count">
                    <el-input v-model="form.count" placeholder="请输入装扮天数"></el-input>
                </el-form-item>




                    <!-- 分类是礼物 -->
                <el-form-item v-if="form.reward_type === 'gift'" label="礼物ID" prop="reward_id">
                    <el-input v-model.number="form.reward_id" placeholder="请输入礼物ID"></el-input>
                </el-form-item>





                <el-form-item label="所需道具" v-if="form.compound_type === 2 || form.reward_type === 'product'">
                    <el-select v-model="form.prop_type" placeholder="请选择" clearable filterable @change="handleChange3">
                    <el-option v-for="item in options3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                    </el-select>
                </el-form-item>


                <div  v-if="form.compound_type === 2 || form.reward_type === 'product'">
                    
                    <div v-for="(item, index) in form.prop_param" :key="index">

                        <el-form-item label="道具ID"
                        :prop="'prop_param.'+ index + '.prop_id'"
                        :rules="[
                            { required: true, message: '持续时长不能为空', trigger: 'blur'},
                        ]"
                        >
                            <el-input v-model="item.prop_id" placeholder="请输入道具ID"></el-input>
                        </el-form-item>
                        <el-form-item label="道具数量"
                            :prop="'prop_param.'+ index + '.prop_count'"
                            :rules="[
                                { required: true, message: '持续时长不能为空', trigger: 'blur'},
                            ]"
                        >
                            <el-input v-model="item.prop_count" placeholder="请输入道具数量"></el-input>
                        </el-form-item>
                    </div>
                </div>

                <el-form-item v-if="form.reward_type === 'gift' && form.compound_type === 2">
                    <el-button type="primary" size="default" @click="handleAddProp">添加道具</el-button>
                </el-form-item>


                <el-form-item label="合成排序" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入合成排序"></el-input>
                </el-form-item>
            </el-form>
            
        
            <section slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </section>
        </el-dialog>
  
    </el-card>
</template>

<script>
  import {
    compoundList,
    compoundDel,
    compoundAdd,
  } from '@/api/compositeManagement'
  
  export default {
    data() {
      return {
        dialogVisible: false,
        options: [
            {
              value: 'gift',
              label: '礼物'
            },
            {
              value: "product",
              label: '装扮'
            }
        ],
        options2: [
            {
              value: 2,
              label: '兑换'
            },
            {
              value: 1,
              label: '合成'
            }
        ],
        options3: [
            {
              value: 'gift',
              label: '礼物'
            },
            {
              value: 'prop',
              label: '道具'
            }
        ],
        tableList: [],
        listQuery: {
          user_code: '',
          nickname: '',
          page: 1,
          perPage: 10,
        },
        meta: {
          page: 1,
          perPage: 10
  
        },
        total: 0,
        /* 弹出框开关 */
        addDialog: false,
        addDialog2: false,
  
        rejectLoading: false,
        passLoading: false,
        id: '',
        // 拒绝原因
        reject_reason: '',
        form: {
            id: undefined,
            price: undefined,
            name: undefined,
            sort: undefined,
            reward_type: 'gift',
            count: undefined, //礼物默认传1，装扮传装扮天数
            prop_param: [
                {
                    prop_count: undefined,
                    prop_id: undefined
                }
            ], //所需道具  prop_id 道具id   prop_count 道具数量
            prop_type: undefined, //道具类型
            reward_id: undefined, //奖励id
            compound_type: undefined
        },
        rules: {
            sort: [{ required: true, message: '请输入合成排序', trigger: 'blur' }]
        },
      }
    },
    created() {
      this.initData()
    },
    methods: {
        indexMethod(index) {
            return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
        },
        handleAdd() {
            this.dialogVisible = true
        },
        handleSearch() {
            this.listQuery.page = 1
            this.initData()
        },
        handleReset() {
            this.listQuery = {
                user_code: '',
                nickname: '',
                page: 1,
                perPage: 10,
            }
            this.initData()
        },
        async initData() {
            try {
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
                }
                const { data } = await compoundList(this.listQuery)
                this.total = data.meta.total
                this.tableList = data.list
            } catch (e) {
                console.error(e)
            }
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除合成礼物, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { code, data} = await compoundDel({
                    id: row.id
                })
                if(code === 200) {
        
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                    this.initData()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        onSubmit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    for (let key in this.form) {
                        this.form[key] = !this.form[key] ? undefined : this.form[key]
                    }
                    // this.form.prop_param = JSON.stringify(this.form.prop_param)
                    if(this.form.reward_type === 'product') {
                        this.form.compound_type = 2
                    }
                    compoundAdd({
                        id:  this.form.id,
                        price:  this.form.price,
                        name:  this.form.name,
                        sort:  this.form.sort,
                        reward_type:  this.form.reward_type,
                        count:  this.form.count, //礼物默认传1，装扮传装扮天数
                        prop_param:  JSON.stringify(this.form.prop_param), //所需道具  prop_id 道具id   prop_count 道具数量
                        prop_type:  this.form.prop_type, //道具类型
                        reward_id:  this.form.reward_id, //奖励id
                        compound_type:  this.form.compound_type
                    }).then(res => {
                        if(res.code === 200) {
                            this.initData()
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            this.dialogVisible = false
                        }
                    })
                }
            })
        },
        closeAddDialog() {
            if (this.$refs['form']) {
                this.$refs['form'].clearValidate() // 清除整个表单的校验
                this.$refs['form'].resetFields() // 清除整个表单的校验
            }
            this.dialogVisible = false
            this.form = {
                price: undefined,
                id: undefined,
                name: undefined,
                sort: undefined,
                reward_type: 'gift',
                count: undefined, //礼物默认传1，装扮传装扮天数
                prop_param: [
                    {
                        prop_count: undefined,
                        prop_id: undefined
                    }
                ], //所需道具  prop_id 道具id   prop_count 道具数量
                prop_type: undefined, //道具类型
                reward_id: undefined, //奖励id
                compound_type: undefined
            }
        },
        handleAddProp() {
            this.form.prop_param.push({
                prop_count: undefined,
                prop_id: undefined
            })
        },
        handleChange1(val) {
            if(val === 1) {
                this.form.count = 1
            }else {
                this.form.count = undefined //礼物默认传1，装扮传装扮天数
            }
            this.form.price = undefined
            this.form.id = undefined
            this.form.name = undefined
            this.form.sort = undefined
            this.form.compound_type = undefined
            this.form.prop_param = [
                    {
                        prop_count: undefined,
                        prop_id: undefined
                    }
                ] //所需道具  prop_id 道具id   prop_count 道具数量
            this.form.prop_type = undefined //道具类型
            this.form.reward_id = undefined //奖励id
        },
        handleChange2(val) {
            this.form.price = undefined
            this.form.id = undefined
            this.form.name = undefined
            this.form.sort = undefined
            this.form.count = 1 //礼物默认传1，装扮传装扮天数
            this.form.prop_param = [
                    {
                        prop_count: undefined,
                        prop_id: undefined
                    }
                ] //所需道具  prop_id 道具id   prop_count 道具数量
            this.form.prop_type = undefined //道具类型
            this.form.reward_id = undefined //奖励id
        },
        handleChange3(val) {
            this.form.id = undefined
            this.form.prop_param = [
                {
                    prop_count: undefined,
                    prop_id: undefined
                }
            ] //所需道具  prop_id 道具id   prop_count 道具数量
        }
    }
}
</script>
  
<style scoped>
  .imageStyle {
    width: 150px;
  }

  .input{
    width: 200px;
  }
</style>
  